// 背景图片
<template>
  <div style="width:100%;height:100%;background-color:#3b4551;text-align: center;">
      <div style="width:65%;margin:auto;min-width:830px">
        <el-page-header id="page" @back='()=>{$router.push("/admin/index")}' content="背景图片列表" style="color:#ffffff;padding-top:10px"></el-page-header>
        <div style="float:right">
          <el-button type="primary" @click="()=>{dialogVisible=true;back={id:'',name:'',url:'',time:''}}">添加</el-button>
        </div>
        
        <el-table
          id="list"
          :data="data"
          style="width: 100%;margin-top:50px;"
          >
          <el-table-column
            label="图片Id"
            width="100">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="图片名称"
            width="200">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="背景略缩图"
            width="200">
            <template slot-scope="scope">
              <!-- <span style="margin-left: 10px">{{ scope.row.url }}</span> -->
              <img width="150px" :src="scope.row.url" alt="">
            </template>
          </el-table-column>

          <el-table-column
            label="开始时间"
            width="150">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.start_time }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="结束时间"
            width="150">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.end_time }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="创建时间"
            width="200">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.created_time }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            width="200">
            <template slot-scope="scope">
              <el-button
              size="mini"
              @click="update(scope.$index, scope.row)">编辑</el-button>
              <el-button
              size="mini"
              type="danger"
              @click="delect(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
          
        </el-table>
      </div>




      <el-dialog
        :visible.sync="dialogVisible"
        width="600px"
        title="添加背景图片"
        :before-close="()=>{dialogVisible=false}" :show-close='false'
        id="option">
        <div id="option_2" style="min-width:560px;width:560px;overflow:hidden">
            <el-input style="width:400px;margin-top:20px" v-model="back.name" placeholder="图片名称"></el-input>
            <el-input style="width:400px;margin-top:20px" v-model="back.url" placeholder="图片网址"></el-input>
            <div style="width:400px;margin-top:20px">
              <!-- <el-time-picker
                is-range
                v-model="back.time"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker> -->
              <el-time-select
                placeholder="起始时间"
                v-model="start"
                :picker-options="{
                  start: '00:00',
                  step: '00:15',
                  end: '24:00'
                }">
              </el-time-select>
              <el-time-select
                placeholder="结束时间"
                v-model="end"
                :picker-options="{
                  start: '00:00',
                  step: '00:15',
                  end: '24:00',
                  minTime: start
                }">
              </el-time-select>
            </div>
        </div>
        <span slot="footer" id="tips" class="dialog-footer">
            <el-button size="mini" @click="dialogVisible = false;">取 消</el-button>
            <el-button size="mini" type="primary" @click="dialogVisible = false;enter()">确 定</el-button>
        </span>
    </el-dialog>


  </div>
</template>


<script>
export default {
  data(){
    return{
      dialogVisible:false,
      data:[],
      start:'',
      end:'',
      back:{name:'',url:'',time:[]},
    }
  },
  methods:{
    //获取今背景图片
    getBackground(){
      this.$axios.post(this.$API.GETBACK).then(res=>{
        console.log(res);
        if(res.code==200 && res.data){
          this.data = res.data;
          //解析时间
          for(let a in res.data){
            res.data[a].start_time = time(res.data[a].start_time);
            res.data[a].end_time = time(res.data[a].end_time);
          }
          console.log(res.data);
        }else{
          alert('获取失败');
        }
      });


      function time(str){
        if(str.indexOf(':')==1){
            str = "0"+str;
        }else if(str.indexOf(':')==-1){
            if(str.length==2){
              str+=":00";
            }else{
              str="0"+str+":00";
            }
        }
        if(str.length==3){
          str+="00";
        }else if(str.length==4){
          str+="0";
        }
        return str;
      }
    },
    //点击确定
    enter(){

      console.log(this.start);
      if(!this.start || !this.end){
        this.dialogVisible=true;
        this.$notify({
            title: '警告',
            message: '时间不可为空',
            type: 'warning'
        });
        return;
      }
      
      this.back.time=[];
      this.back.time.push(this.start);
      this.back.time.push(this.end);

      console.log(this.back);
      //添加一条背景图片数据
      this.$axios.post(this.$API.ADDBACK,{
        back:this.back,
      }).then(res=>{
        if(res.code == 200){
          this.getBackground();
          this.$notify({
            title: '成功',
            message: (this.back.id?"修改":"添加")+'成功',
            type: 'success'
          });
        }else{
            alert((this.back.id?"修改":"添加")+'失败');
        }
      })
    },
    //删除
    delect(index,row){
      console.log(row);
      this.$axios.post(this.$API.DELECTBACK,{
        back_id:row.id
      }).then(res=>{
        if(res.code==200){
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          });
          this.getBackground();
        }
      });
    },
    //编辑背景图片
    update(index,row){
      this.back = {
        id:row.id,
        url:row.url,
        time:'',
        name:row.name
      }
      this.dialogVisible=true;
    }

  },
  created(){
    this.getBackground();
  }
}
</script>


<style scoped>
  #page >>> div.el-page-header__content{
    color:#ffffff !important;
  }

  span{
    margin-left: 0 !important;
  }

  #list{
    border-radius: 5px;
  }



/* 悬浮框编辑部分的样式 */
#option >>> div.el-dialog__header{
    background-color: #e5e6e5;
    text-align: left;
}
/* 悬浮窗整体的样式，圆角之类的 */
#option >>> div{
    border-radius: 10px;
    text-align: left;
}
/* 悬浮窗的主体 */
#option >>> div.el-dialog__body{
    padding-top: 0;
    padding-bottom: 5px;
}

/* 悬浮窗底部 */
#option >>> div.el-dialog__footer{
    padding-bottom: 10px;
    text-align: right;
}
</style>